<!DOCTYPE html>
<html lang="zh-ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>挂号平台</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/ui.css">
</head>

<body>
    <div id="top" class="top">
        <div class="wrap">
            <p class="call">010-114/116114电话预约</p>
            <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;&nbsp;
                <a href="#">登录</a>&nbsp;
                <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">帮助中心</a>
            </p>
        </div>
    </div>
    <div id="header" class="header">
        <div class="wrap">
            <a href="#" class="logo"><img src="./images/logo.png"></a>
            <div class="search ui-search">
                <div class="ui-search-selected">医院</div>
                <div class="ui-search-list">
                    <a href="#">科室</a>
                    <a href="#">疾病</a>
                    <a href="#">医院</a>
                </div>
                <input type="text" name="ui-search-input" class="ui-search-input" placeholder="请输入搜索内容">
                <a href="#" class="ui-search-submit">&nbsp;</a>
            </div>
        </div>
    </div>
    <div id="nav" class="nav">
        <div class="wrap">
            <div class="link menu">全部科室
                <div class="menu-list ui-menu">
                    <div class="ui-menu-item">
                        <a href="#" class="ui-department">内科</a>
                        <a href="#" class="ui-disease">高血压</a>
                        <a href="#" class="ui-disease">冠心病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-detail-group">
                                <div class="ui-detail-group-caption">内科</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                                <div class="ui-detail-group-caption">常见见疾病</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#" class="ui-department">外科</a>
                        <a href="#" class="ui-disease">肾结石</a>
                        <a href="#" class="ui-disease">脑外伤</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-detail-group">
                                <div class="ui-detail-group-caption">内科</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                                <div class="ui-detail-group-caption">常见见疾病</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#" class="ui-department">儿科</a>
                        <a href="#" class="ui-disease">抽动症</a>
                        <a href="#" class="ui-disease">小儿感冒</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-detail-group">
                                <div class="ui-detail-group-caption">内科</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                                <div class="ui-detail-group-caption">常见见疾病</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#" class="ui-department">骨外科</a>
                        <a href="#" class="ui-disease">关节炎</a>
                        <a href="#" class="ui-disease">骨折</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-detail-group">
                                <div class="ui-detail-group-caption">内科</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                                <div class="ui-detail-group-caption">常见见疾病</div>
                                <div class="ui-detail-group-list">
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">心脑血管科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">内分泌科室</a>
                                    <a href="#">血液科</a>
                                    <a href="#">神经内科</a>
                                    <a href="#">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" class="link">按医院挂号</a>
            <a href="#" class="link">按科室挂号</a>
            <a href="#" class="link">按疾病挂号</a>
            <a href="#" class="link">最新公告</a>
            <a href="#" class="link right">社会知名医院</a>
        </div>
    </div>
    <div id="banner" class="banner">
        <div class="banner-slide ui-slide" ">
            <div class="ui-slide-wrap" >
                <a href="#" class="item">
                        <img src="images/banner_1.jpg">
                </a>
                <a href="#" class="item">
                        <img src="images/banner_2.jpg">
                </a>
                <a href="#" class="item">
                        <img src="images/banner_3.jpg">
                </a>
            </div>
            <div class="ui-slide-arrow">
                <a href="#" class="item left">&nbsp;</a>
                <a href="#" class="item right">&nbsp;</a>
            </div>
            <div class="ui-slide-process">
                <a href="#" class="item item_focus">&nbsp;</a>
                <a href="#" class="item item">&nbsp;</a>
                <a href="#" class="item item">&nbsp;</a>
            </div>
        </div>
        <div class="banner-search">
            <div class="caption"><span class="text">快速预约</span></div>
            <div class="form">
                <div class="line"><select name="area">
                        <option>医院地区</option>
                    </select></div>
                <div class="line"><select name="level">
                        <option>医院等级</option>
                    </select></div>
                <div class="line"><select name="name">
                        <option>医院名称</option>
                    </select></div>
                <div class="line"><select name="department">
                        <option>医院科室</option>
                    </select></div>
            </div>
            <div class="submit">
                <input type="button" class="button" value="快速查询">
            </div>
        </div>
        <div class="banner-help">
            <div class="caption"><span class="text">帮助中心</span></div>
            <a href="#" class="link">账号指南</a>
            <a href="#" class="link">预约指南</a>
            <a href="#" class="link">账号找回</a>
            <a href="#" class="link">常见问题</a>
        </div>

    </div>
    <div id="content" class="content ">
        <div class="wrap clearfix">
            <div class="content-tab">
                <div class="caption">
                    <a href="#" class="item item-focus">医院</a>
                    <a href="#" class="item">科室</a>
                </div>
                <div class="block">
                    <div class="item">
                        <div class="hospital-header">
                            <a href="#" class="hospital-header-item hospital-header-item-focus">全部</a>
                            <a href="#" class="hospital-header-item">东城区</a>
                            <a href="#" class="hospital-header-item">西城区</a>
                            <a href="#" class="hospital-header-item">朝阳区</a>
                            <a href="#" class="hospital-header-item">丰台区</a>
                            <a href="#" class="hospital-header-item">石景山区</a>
                            <a href="#" class="hospital-header-item">海淀区</a>
                            <a href="#" class="hospital-header-item">门头沟区</a>
                            <a href="#" class="hospital-header-item">房山区</a>
                            <a href="#" class="hospital-header-item">其他</a>
                        </div>
                        <div class="hospital-content ">
                            <div class="hospital-list clearfix">
                                <div class="item ">
                                    <img src="./images/hospital-1.jpg">
                                    <div class="name">北京协和医院<span class="level">【三级甲等】</span></div>
                                    <div class="phone">电话：东院咨询台:010-69155564..</div>
                                    <div class="address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                </div>
                                <div class="item">
                                    <img src="./images/hospital-2.jpg">
                                    <div class="name">北京大学第一医院<span class="level">【三级甲等】</span></div>
                                    <div class="phone">电话：东院咨询台:010-83672211、010-6..</div>
                                    <div class="address">北京市西城区西什库大街八号...</div>
                                </div>
                                <div class="item">
                                    <img src="./images/hospital-3.jpg">
                                    <div class="name">北京大学人民医院<span class="level">【三级甲等】</span></div>
                                    <div class="phone">电话：东院咨询台:010-88325141、010-8..</div>
                                    <div class="address">北京市西城区西直门南大街11...</div>
                                </div>
                                <div class="item">
                                    <img src="./images/hospital-4.jpg">
                                    <div class="name">北京大学第三医院<span class="level">【三级甲等】</span></div>
                                    <div class="phone">电话：东院咨询台:010-82266699、第二..</div>
                                    <div class="address">北京市海淀区花园北路49号；【第二门诊部】北京市西三旗育...</div>
                                </div>
                            </div>
                            <div class="content-list-text clearfix">
                                <a href="#" class="item">首都儿童研究所附属医院<span class="level">【三级甲等】</span></a>
                                <a href="#" class="item">中国医学科学院阜外医院<span class="level">【三级甲等】</span></a>
                                <a href="#" class="item">首都医科大学附属背景天坛医院<span class="level">【三级甲等】</span></a>
                                <a href="#" class="item">首都医科大学附属背景安贞医院<span class="level">【三级甲等】</span></a>
                                <a href="#" class="item">首都医科大学宣武医院<span class="level">【三级甲等】</span></a>
                                <a href="#" class="item">首都医科大学附属北京同仁医院<span class="level">【三级甲等】</span></a>
                            </div>
                            <a href="#" class="content-more">更多医院</a>
                        </div>
                        <div class="hospital-other-content" style="display:none">其他</div>
                    </div>
                    <div class="item" style="display:none">科室内容</div>
                </div>
            </div>
            <div class="content-news">
                <div class="caption">最新公告<a href="#" class="more">|更多</a></div>
                <div class="list">
                    <a href="#" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#" class="link">中国联合网络通讯有限公司北京市...</a>
                    <a href="#" class="link">防护策略升级通知...</a>
                    <a href="#" class="link">首都儿科研究所附属儿童医院暂停...</a>
                    <a href="#" class="link">首都医科大学附属复兴医院(门诊...</a>
                    <a href="#" class="link">背景燕化医院暂停更新号源通知...</a>
                </div>
            </div>
            <div class="content-close">
                <div class="caption">停诊公告<a href="#" class="more">|更多</a></div>
                <div class="list">
                    <a href="#" class="link">民航总医院呼吸内科停诊公告</a>
                    <a href="#" class="link">解放军307医院淋巴肿瘤内科停...</a>
                    <a href="#" class="link">北京市延庆区医院神经内科门诊停...</a>
                    <a href="#" class="link">空军总医院皮肤科门诊停诊公告</a>
                    <a href="#" class="link">北京市门头沟市医院骨外门诊停诊...</a>
                    <a href="#" class="link">北京军区总医院血管外科门诊停诊...</a>
                </div>
            </div>
        </div>

    </div>
    <div id="footer" class="footer"></div>
    <script src="./js/jquery-1.12.0.min.js"></script>
    <script src="./js/ui.js"></script>
</body>

</html>